<script>
import UFormItem from "../../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import uSelect from "../../../../../../components/base/u-select/index.vue";
import {getUserInfoApi} from "../../../../../../api/common/user";
import {getProjectListApi} from "../../../../../../api/common/product";
import {getAgentListApi} from "../../../../../../api/common/power-station";
import ModuleCard from "../../../../../../components/business/module-card/index.vue";
import {getProjectCompanyList} from "../../../../../../api/common/company";
import {getProjectInfoDetailApi} from "../../../../../../api/customer";

export default {
  name: "index",
  components: {ModuleCard, uSelect, UFormItem},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    // formData: {
    //   get() {
    //     return this.$props.value
    //   },
    //   set(val) {
    //     console.log(val, 555555)
    //     this.$emit('input', val)
    //   }
    // },
  },
  data(){
    return {
      projectList: [],
      agentList: [], // 代理商列表
      // 租金列表
      rentStandardList: [],
      // formData: {
      //   projectCode: '',
      //   projectName: '',
      //   projectId: '',
      //   projectCompanyId: '',
      //   payCycle: '',
      //   beianCapacity: '',
      //   beianModel: '',
      //   filingNumber: '',
      // }
    }
  },
  watch: {
    formData: {
      handler(val) {
        console.log(val, 998)
        // console.log(this.$props.value, val, 991)
        // console.log(Object.assign(this.$props.value, val), 10000)
        // this.$emit('input', Object.assign(this.$props.value, val));
      },
      deep: true,
    }
  },
  mounted() {
    this.getProjectList();
    this.getAgentList();
  },
  methods: {
    async getProjectList(){
      const { user } = await getUserInfoApi();
      const { data } = await getProjectListApi({ userId: user.userId, type: 1 });
      this.projectList = data;
    },
    // 获取合作年限和租金下拉列表数据
    async getProjectInfoDetail() {
      const { data } = await getProjectInfoDetailApi(this.$props.formData.projectId);
      this.rentStandardList = data.variables;
    },
    projectChange(project) {
      this.$props.formData.projectCode = project.code;
      this.$props.formData.projectId = project.id;
      this.$props.formData.payCycle = project.payCycle;
      this.getProjectInfoDetail();
    },
    // 获取代理商列表
    async getAgentList() {
      const { data } = await getProjectCompanyList();
      this.agentList = data;
    },
  }
}
</script>

<template>
  <module-card title="项目信息">
    <u-form-item
        label="产品编码"
        prop="formData.projectCode"
        borderBottom
        ref="item1"
        required
    >
      <u--input
          v-model="formData.projectCode"
          border="none"
          placeholder="请输入项目编码"
          :disabled="disabled"
          disabled-color="#fff"
      ></u--input>
    </u-form-item>
    <u-form-item
        label="产品名称"
        prop="formData.projectId"
        ref="item1"
        :borderBottom="rentStandardList.length === 0"
        required
    >
      <u-select
          v-model="formData.projectId"
          placeholder="请选择产品"
          :options="projectList"
          @change="projectChange"
          :props="{
                label: 'name',
                value: 'id'
              }"
          :disabled="disabled"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <view class="table-wrap" v-if="rentStandardList.length > 0">
      <uni-table border emptyText="没有更多租金相关信息" >
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in rentStandardList" :key="index">
          <uni-td>合作年限</uni-td>
          <uni-td>{{item.startYear}}-{{item.endYear}}年</uni-td>
          <uni-td>租金标准</uni-td>
          <uni-td>{{item.unitPrice}}元/块/年</uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!--todo...-->
    <u-form-item
        label="所属项目公司"
        prop="formData.projectCompanyId"
        borderBottom
        ref="item1"
    >
      {{formData.projectCompanyId}}
      <u-select
          v-model="formData.projectCompanyId"
          placeholder="请选择所属项目公司"
          :options="agentList"
          :disabled="disabled"
          :props="{
                label: 'name',
                value: 'id'
              }"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="租金支付方式"
        prop="formData.payCycle"
        borderBottom
        ref="item1"
    >
      <u-select
          v-model="formData.payCycle"
          placeholder="请选择租金支付方式"
          :disabled="true"
          :options="[
                  { label: '按月支付', value: '1'},
                  { label: '按季支付', value: '2'},
                  { label: '按年支付', value: '3'},
                 ]"
      ></u-select>
      <!--<u&#45;&#45;input-->
      <!--    v-model="formData.payCycle"-->
      <!--    border="none"-->
      <!--    placeholder="请选择租金支付方式"-->
      <!--&gt;</u&#45;&#45;input>-->
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="备案装机容量"
        prop="formData.beianCapacity"
        borderBottom
        ref="item1"
        required
    >
      <u--input
          v-model="formData.beianCapacity"
          border="none"
          :disabled="disabled"
          disabled-color="#fff"
          placeholder="请输入备案装机容量"
      >
        <template slot="suffix">W</template>
      </u--input>
    </u-form-item>
    <u-form-item
        label="备案方式"
        prop="formData.beianMode"
        borderBottom
        ref="item1"
        required
    >
      <u-select
          v-model="formData.beianMode"
          :disabled="disabled"
          placeholder="请选择备案方式"
          :options="[
                  { label: '自然人备案', value: '0'},
                  { label: '项目公司备案', value: '1'},
                 ]"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="备案号"
        prop="formData.filingNumber"
        borderBottom
        ref="item1"
    >
      <u--input
          v-model="formData.filingNumber"
          border="none"
          placeholder="请输入备案号"
          :disabled="disabled"
          disabled-color="#fff"
      ></u--input>
    </u-form-item>
    <!--<u-form-item-->
    <!--    label="电站编码"-->
    <!--    prop="formData.powerStationCode"-->
    <!--    borderBottom-->
    <!--    ref="item1"-->
    <!--&gt;-->
    <!--  <u&#45;&#45;input-->
    <!--      v-model="formData.powerStationCode"-->
    <!--      border="none"-->
    <!--      placeholder="请输入电站编码"-->
    <!--  ></u&#45;&#45;input>-->
    <!--</u-form-item>-->
    <!--<u-form-item-->
    <!--    label="登记时间"-->
    <!--    prop="formData.createTime"-->
    <!--    ref="item1"-->
    <!--&gt;-->
    <!--  <date-select v-model="formData.createTime"/>-->
    <!--  &lt;!&ndash;<u&#45;&#45;input&ndash;&gt;-->
    <!--  &lt;!&ndash;    v-model="formData.createTime"&ndash;&gt;-->
    <!--  &lt;!&ndash;    border="none"&ndash;&gt;-->
    <!--  &lt;!&ndash;    placeholder="请输入登记时间"&ndash;&gt;-->
    <!--  &lt;!&ndash;&gt;</u&#45;&#45;input>&ndash;&gt;-->
    <!--  &lt;!&ndash;<u-icon&ndash;&gt;-->
    <!--  &lt;!&ndash;    slot="right"&ndash;&gt;-->
    <!--  &lt;!&ndash;    name="arrow-right"&ndash;&gt;-->
    <!--  &lt;!&ndash;&gt;</u-icon>&ndash;&gt;-->
    <!--</u-form-item>-->
  </module-card>
  <!--<view class="module">-->
  <!--  <view class="cell module__title">-->
  <!--    <view class="cell-hd">-->
  <!--      <u-icon name="order" size="22"></u-icon>-->
  <!--    </view>-->
  <!--    <view class="cell-bd module__title__text">项目信息</view>-->
  <!--  </view>-->
  <!--  -->
  <!--</view>-->
</template>

<style scoped lang="scss">
.table-wrap{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
